<template>
  <a-table id="schema" :pagination='false' :columns="columns" :row-key="record => record.tableName" :data-source="tableList">
    <template v-slot:action="{ record }">
      <span>
        <a @click="showTableColumns(record.tableName)">{{ this.$t('columns') }}</a>
        <a-divider type="vertical" />
        <a @click="showTableDDL(record.tableName)">{{ this.$t('ddl') }}</a>
      </span>
    </template>
  </a-table>
</template>

<script>
import { getTableDDL } from '../api/requet.js'
export default {
  data() {
    return {
      db: window.sessionStorage.getItem("db"),
      schemaName: "",
      tableList: []
    };
  },
  computed: {
    columns: {
      get: function () {
        var tmp = [{
          title: this.$t('table.tableName'),
          dataIndex: 'tableName',
          sorter: (a, b) => { return a.tableName.localeCompare(b.tableName) }
        },
        {
          title: this.$t('table.tableComment'),
          dataIndex: 'tableComment',
          sorter: (a, b) => { return a.tableComment.localeCompare(b.tableComment) },
          width: '20%'
        }];
        var endTmp = [{
          title: this.$t('action'),
          key: 'action',
          slots: { customRender: 'action' },
        }];
        if (this.db === 'MySQL') {
          // 如果当前数据库是mysql
          var mysqlTmp = [{
            title: this.$t('table.mysql.tableSchema'),
            dataIndex: 'tableSchema'
          }, {
            title: this.$t('table.mysql.engine'),
            dataIndex: 'engine'
          }, {
            title: this.$t('table.mysql.tableRows'),
            dataIndex: 'tableRows',
            sorter: (a, b) => { return a.tableRows - b.tableRows }
          }, {
            title: this.$t('table.mysql.createTime'),
            dataIndex: 'createTime',
            sorter: (a, b) => {
              if (a.createTime == null) {
                a.createTime = "";
              }
              if (b.createTime == null) {
                b.createTime = "";
              }
              return a.createTime && null != b.createTime;
            }
          }, {
            title: this.$t('table.mysql.updateTime'),
            dataIndex: 'updateTime',
            sorter: (a, b) => {
              if (a.updateTime == null) {
                a.updateTime = "";
              }
              if (b.updateTime == null) {
                b.updateTime = "";
              }
              return a.updateTime.localeCompare(b.updateTime);
            }
          }, {
            title: this.$t('table.mysql.tableCollation'),
            dataIndex: 'tableCollation'
          }];
          return tmp.concat(mysqlTmp).concat(endTmp);
        } else {
          // 否则当前数据库是oracle
          var oracleTmp = [{
            title: this.$t('table.oracle.owner'),
            dataIndex: 'owner'
          }, {
            title: this.$t('table.oracle.tableType'),
            dataIndex: 'tableType'
          }, {
            title: this.$t('table.oracle.tableSpaceName'),
            dataIndex: 'tableSpaceName'
          }, {
            title: this.$t('table.oracle.status'),
            dataIndex: 'status'
          }, {
            title: this.$t('table.oracle.numRows'),
            dataIndex: 'numRows',
            sorter: (a, b) => { return a.numRows - b.numRows }
          }, {
            title: this.$t('table.oracle.lastAnalyzed'),
            dataIndex: 'lastAnalyzed',
            sorter: (a, b) => {
              if (a.lastAnalyzed == null) {
                a.lastAnalyzed = "";
              }
              if (b.lastAnalyzed == null) {
                b.lastAnalyzed = "";
              }
              return a.lastAnalyzed.localeCompare(b.lastAnalyzed);
            }
          }, {
            title: this.$t('table.oracle.defaultCollation'),
            dataIndex: 'defaultCollation'
          }];
          return tmp.concat(oracleTmp).concat(endTmp);
        }
      }
    }
  },
  methods: {
    // 展示表的字段
    showTableColumns(tableName) {
      this.$router.push({ path: '/table', query: { schema: this.schemaName, table: tableName } });
    },
    // 展示表的ddl
    async showTableDDL(tableName) {
      var ddl = await getTableDDL(this.schemaName, tableName);
      console.log(ddl);
    }
  },
  watch: {
    $route: {
      handler() {
        //深度监听，同时也可监听到param参数变化
        this.schemaName = this.$route.query.schema;
        this.tableList = JSON.parse(window.sessionStorage.getItem("tableList"));
      },
      deep: true,
    }
  },
  mounted() {
    this.schemaName = this.$route.query.schema;
    this.tableList = JSON.parse(window.sessionStorage.getItem("tableList"));
  }
}
</script>

<style>
#schema {
  height: 100%;
  width: 100%;
}
</style>
